<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
  <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
  <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/locale/zh-cn.js"></script>
  <script src="./assets/lib/axios.min.js"></script>
  <script src="./assets/js/index.js"></script>
  <script src="./assets/lib/lodash.custom.min.js"></script>
  <script src="./assets/lib/cookie.js"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZydvYpHfVr0D6qnoUGYfe8KpXoXrQ1VN"></script>
  <script>
    var lodash = _;
    if(window.location.host=='www.wandaly.net'){
      Cookie.set('WHERE',12,{path:'/'})
    }else{
      Cookie.set('WHERE',11,{path:'/'})
      
    }
  </script>
  <script type="text/javascript" src="./assets/lib/vue-hotel-datepicker.min.js"></script>
  <script src="./assets/js/axios.js"></script>
  <link rel="stylesheet" href="./assets/css/index.css">
  <title>酒店</title>
  <style>
    .calendar {
      height: 36px !important;
    }

    .datepicker__dummy-wrapper input {
      height: 36px !important;
    }

    .calendar button {
      top: -7px !important;
    }

    .Markpoint {
      /* arrow.style.background = "url(./assets/img/location.png) no-repeat"; */
      background: url(./assets/img/location.png) no-repeat 0 0;
      background-size: 24px 24px;
      position: relative;
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      z-index: 3;
    }

    .leftpost {
      height: 22px;
      color: #000;
      opacity: .9;
      top: 1px;
      position: absolute;
      left: 17px;
      padding-left: 15px;
      display: inline-block;
      line-height: 22px;
      background: url(./assets/img/mapicocc.png) no-repeat;

    }

    .ss {
      background: url(./assets/img/mapicocc.png) no-repeat;
      height: 22px;
      line-height: 22px;
      line-height: 22px\9;
      z-index: 1;
      background-position: right 0;
      display: block;
      width: 10px;
      position: absolute;
      top: 0;
      right: -9px;
    }

    .map {
      /* position: absolute;
      top: 0;
      right: 0; */
      float:right;
    }
  </style>
</head>

<body>
  <div class="wrap">

    <div class="searchpage" id="searchpage">
    
      <div class="searchbar" v-cloak>
        <div class="searchitem">
          <span>目的地：</span>
          <auto-complete size="large" v-model="destination" @on-search="handleSearch" placeholder="输入目的地" style="height:42px; width:200px">
            <i-option @click="chooseCityinfo(item)" v-for="(item,index) in citylist" :value="typeof(item['@CityName'])!='undefined'?item['@CityName']:''"
              :key="index" v-cloak>{{ item['@CityName'] }}</i-option>
          </auto-complete>
        </div>
        <div class="searchitem">
          <ddd @in-changed='checkInChanged' @out-changed="checkOutChanged" class="calendar" :i18n="ptBr" :start-date='checkinday' :ending-date-value.sync="checkoutday"
            :starting-date-value.sync="checkinday">
          </ddd>
        </div>
        <div class="searchitem" v-cloak>
          <span>关键词：</span>
          <auto-complete @on-select='beselect' size="large" placement="bottom" v-model="keyword" :value='keyword' @on-search="handleSearchkeyword"
            placeholder="输入关键字" style="width:200px">
            <i-option v-for="(item,index) in keywordList" :value=" typeof(item.name)!='undefined'?item.name:''" :key="index" v-cloak>{{ item.name }}</i-option>
            <!-- @click.native="getKeywordfrom(item)" -->
            <!-- <div class="cityinfo" v-if="Cityinfo&&this.keyword==''">
              <div class="locaticonitem Businesscircle">
                <div class="title">
                  <span>商圈</span>
                </div>
                <i-option  @click.native="getKeyword(item,0)" v-for="(item,index) in Cityinfo['CommericalLocations'].Location" :value="item['@Name']"
                  :key="index">{{ item['@Name'] }}</i-option>
              </div>
              <div class="locaticonitem">
                <div class="title">
                  <span>地区</span>
                </div>
                <p @click.stop="getKeyword(item,1)" v-for="(item,index) in Cityinfo['Districts'].Location" :value="66666" :key="index">{{ item['@Name'] }}</p>
              </div>
            </div> -->
          </auto-complete>
        </div>
        <div class="searchitem">
          <i-button type="primary" shape="circle" icon="ios-search" @click="searchhotel">搜索</i-button>
        </div>
      </div>

      <div class="searchresult" style="position: relative;">
        <Spin size="large" fix v-if="loadingflag"></Spin>
        <div class="nonebar" v-if="hotelList.length==0">
          <Icon type="heart-broken" size="60"></Icon>
          <span>没有相关的酒店请更改查询条件</span>
        </div>
        <div class="hotel-cc" style="float: left;">

          <div class="hotellist" v-if="hotelList.length>0" v-cloak>
            <div class="hotelitem" v-for="(item,index) in hotelList" v-cloak @mouseover="bemovedOver(item)">
              <div class="img" v-cloak>
                <img :src="item.Detail.ThumbNailUrl" alt="">
              </div>
              <div class="hotelinfo">
                <p class="title">
                  <Icon type="location" size="30"></Icon>
                  <span class="info_cn" v-cloak>{{item.Detail.HotelName}}</span>
                  <span :title="formatCategory(item.Detail.Category)">
                    <rate v-model="item.Detail.Category" disabled></rate>
                  </span>
                </p>
                <p class="address" v-cloak>
                  <a href="#" data-recall="true">[{{item.Detail.BusinessZoneName}}]</a>
                  {{item.Detail.Address}}
                  <span class="info_b2_l">
                    <Icon type="location" size="15"></Icon>地图
                  </span>
                </p>
                <div class="hotel_inf_sale clearfix mt5">
                  <p class="h_comt_other">

                    <span class="icon_faci " :class="'icon_'+item.tag" :title="item.tip" v-for="(item,index) in hotelService(item.Facilities)"></span>
                  </p>
                </div>

              </div>
              <div class="score" v-cloak>
                <p v-cloak>{{getScore(item.Detail.Review)}}</p>
              </div>
              <div class="price">
                <p class="num">
                  <i>￥</i>
                  <span v-cloak>{{item.LowRate}}</span>
                  <i>起</i>
                </p>
                <p class="todetails">
                  <button class="mouse-cursor-gradient-tracking" @click="toHoteldetails(item)">
                    <span>查看详情</span>
                  </button>
                  <!-- <i-button type="primary" class="mouse-cursor-gradient-tracking">查看详情</i-button> -->
                </p>
              </div>
            </div>
          </div>

          <div class="page" v-if="hotelList.length!=0">
            <page style="margin:0 auto" :current.sync="currentpage" :total="Count" :page-size="10" @on-change="changePage"></page>
          </div>
        </div>
        <affix>
          <div class="map" id="allmap" v-show="hotelList.length!=0" style="width: 268px;height:350px;">
          </div>
        </affix>
      </div>
    </div>

  </div>
  </div>

  <script>
    var self = null;
    var app = new Vue({
      el: '#searchpage',
      data() {
        return {
          ComplexCustomOverlay: null,
          mp: null,//地图对象
          loadingflag: false,
          ptBr: {
            night: '晚',
            nights: '晚',
            'day-names': ['日', '一', '二', '三', '四', '五', '六'],
            'check-in': '入住日期',
            'check-out': '离店日期',
            'month-names': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月',
              '10月', '11月', '12月'
            ],
          },
          cansearch: true,
          hotelList: [],
          Count: 0,//查询的酒店的数量
          //查询条件开始//
          Position: {
            Longitude: '',
            Latitude: '',
            Radius: 2000,//默认半径2公里
          },
          checkinday: new Date(),//入住日期
          checkoutday: moment().add(1, 'days').toDate(),//离开日期
          QueryText: '',
          QueryType: 'Intelligent',
          // DistrictId: '',
          // BusinessZoneId: '',
          // Position: '',
          CityId: '0',
          currentpage: 1,
          //查询条件结束//
          Cityinfo: null,
          keywordList: [''],
          citylist: [''],
          disabled: [],
          clear: true,
          format: 'yyyy-MM-dd',
          keyword: '',
          destination: '',

        }
      },
      components: {
        'ddd': HotelDatePicker
      },
      computed: {
        totalpage() {
          console.log('总数是', parseInt(this.Count / 10));
          return parseInt(this.Count / 10);
        },


      },
      created() {
        self = this;
        this.bus = new Vue();
        localStorage.removeItem("hoteldetails");
        var btn = document.querySelector('.mouse-cursor-gradient-tracking')
        btn.onmousemove = function (e) {
          var x = e.pageX - btn.offsetLeft
          var y = e.pageY - btn.offsetTop
          btn.style.setProperty('--x', x + 'px')
          btn.style.setProperty('--y', y + 'px')
        }


      },
      mounted() {
        this.mp = new BMap.Map("allmap");
        var point = new BMap.Point(116.407845, 39.914101);
        this.mp.centerAndZoom(point, 15);
        this.mp.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_ZOOM}));
        // var marker = new BMap.Marker(point);
        // this.mp.addOverlay(marker);
        this.ComplexCustomOverlay = function ComplexCustomOverlay(point, text) { //标注对象
          this._point = point;
          this._text = text;
          // this._overText = mouseoverText;
        }
        this.ComplexCustomOverlay.prototype = new BMap.Overlay(); //继承
        this.ComplexCustomOverlay.prototype.initialize = function (map) {
          this._map = map;
          var div = this._div = document.createElement("div");
          div.className = 'Marked';
          div.style.position = "absolute";
          div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
          div.style.height = "18px";
          div.style.padding = "2px";
          div.style.lineHeight = "18px";
          div.style.whiteSpace = "nowrap";
          div.style.MozUserSelect = "none";
          div.style.fontSize = "12px";
          var arrow = this._arrow = document.createElement("div");
          arrow.className = "Markpoint";
          arrow.style.left = 0;
          arrow.style.top = 0;
          div.appendChild(arrow);
          var ss = this._span_d = document.createElement("span");
          ss.className = "ss";
          var span = this._span = document.createElement("div");
          span.className = "leftpost"
          div.appendChild(span);
          span.appendChild(ss);
          span.appendChild(document.createTextNode(this._text));
          var that = this;
          div.onmouseover = function () {
            this.style.zIndex = 99;
            // this.style.backgroundColor = "#6BADCA";
            // this.style.borderColor = "#0000ff";
            // this.getElementsByTagName("span")[0].innerHTML = that._overText;
            // arrow.style.backgroundPosition = "0px -20px";
          }
          div.onmouseout = function () {
            this.style.zIndex = 1;
            // this.style.backgroundColor = "#EE5D5B";
            // this.style.borderColor = "#BC3B3A";
            // this.getElementsByTagName("span")[0].innerHTML = that._text;
            // arrow.style.backgroundPosition = "0px 0px";
          }
          self.mp.getPanes().labelPane.appendChild(div);
          return div;
        }
        this.ComplexCustomOverlay.prototype.draw = function () {
          var map = this._map;
          var pixel = map.pointToOverlayPixel(this._point);
          this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 15 + "px";
          this._div.style.top = pixel.y - 27 + "px";
        }


        var txt = "银湖海岸城";
        // var myCompOverlay = new this.ComplexCustomOverlay(new BMap.Point(116.407845, 39.914101), "银湖海岸城");
        // this.mp.addOverlay(myCompOverlay);
        // var myCompOverlay = new self.ComplexCustomOverlay(new BMap.Point(116.407845, 39.914101), "银湖海岸城");
        //     self.mp.addOverlay(myCompOverlay);
      },
      watch: {

      },
      methods: {
        bemovedOver(item) {
          var point = new BMap.Point(item.Detail.Longitude, item.Detail.Latitude);
          this.mp.centerAndZoom(point, 15);
        },
        checkInChanged(v) {
          console.log("??????", v);
          this.checkinday = v;
        },
        checkOutChanged(v) {
          console.log("??????", v);
          this.checkoutday = v;
        },
        toHoteldetails(item) {
          //存localstorage
          let searchparams = {
            Options: '1,2,4',
            RatePlanId: 0,
            HotelIds: item.HotelId,
            ArrivalDate: moment(this.checkinday).format('YYYY-MM-DD'),
            DepartureDate: moment(this.checkoutday).format('YYYY-MM-DD'),
          }
          localStorage.setItem('hoteldetails', JSON.stringify(searchparams));
          window.location.href = 'hoteldetails.html?hotelid=' + item.HotelId;
        },
        hotelService(service) {
          if (service != null) {

            var classtyle = [];
            var d = service.split(',');
            for (var i = 0; i < d.length; i++) {
              if (this.hotelserviceswitch(d[i]) != '') {
                classtyle.push(this.hotelserviceswitch(d[i]));
              }
            }
            return classtyle;
          } else {
            return [];
          }
        },
        hotelserviceswitch(service) {
          switch (service) {
            case '1':
              return { tag: 'wifi', tip: '免费WIFI' };
              break;
            case '2':
              return { tag: 'wifi', tip: '收费WIFI' };
              break;
            case '3':
              return { tag: 'wifi', tip: '免费宽带' };
              break;
            case '4':
              return { tag: 'wifi', tip: '收费宽带' };
              break;
            case '5':
              return { tag: 'parking', tip: '免费停车' };
              break;
            case '6':
              return { tag: 'parking', tip: '收费停车' };
              break;
            case '7':
              return { tag: 'pickup', tip: '免费接机服务' };
              break;
            case '8':
              return { tag: 'pickup', tip: '收费接机服务' };
              break;
            case '9':
              return { tag: 'swimmingpool', tip: '室内游泳池' };
              break;
            case '10':
              return { tag: 'swimmingpool', tip: '室外游泳池' };
              break;
            case '11':
              return { tag: 'fitness', tip: '健身房' };
              break;
            case '13':
              return { tag: 'meeting', tip: '会议室' };
              break;
            case '14':
              return { tag: 'restaurant', tip: '餐厅' };
              break;
            case '16':
              return { tag: 'luggage', tip: '行李寄存' };
              break;
            default:
              return '';
          }
        },
        searchHotelAxios(pindex) {
          // localStorage.setItem('search')

          return axios
            .post("/api/eLongHotels/HotelInfo/GetHList", {
              Position: JSON.stringify(this.Position),
              ArrivalDate: moment(this.checkinday).format('YYYY-MM-DD'),
              DepartureDate: moment(this.checkoutday).format('YYYY-MM-DD'),
              CityId: this.CityId,
              QueryText: this.keyword,
              QueryType: 'Intelligent',
              PageIndex: pindex,
              PageSize: 10,
              PaymentType: 'Prepay',
              ResultType: "1,2,3,4",
              StarRate: "0,1,2,3,4,5",
              HighRate: 1000000,
              LowRate: 0,
            })
        },
        changePage(pageindex) {//分页
          this.loadingflag = true;
          this.searchHotelAxios(pageindex).then(function (res) {
            console.log('酒店搜索结果', res.data.Result);
            var hotelResult = res.data.Result;
            self.Count = hotelResult.Count;
            self.hotelList = hotelResult.Hotels.filter(function (item) {
              return item.LowRate;
            });
            self.loadingflag = false;
            console.log('坐标',self.hotelList[0].Detail.Longitude, self.hotelList[0].Detail.Latitude);
            var pp = new BMap.Point(self.hotelList[0].Detail.Longitude, self.hotelList[0].Detail.Latitude);
            self.mp.centerAndZoom(pp, 15);
            for (var i = 0; i < self.hotelList.length; i++) {
              self.mp.addOverlay(new self.ComplexCustomOverlay(new BMap.Point(self.hotelList[i].Detail.Longitude, self.hotelList[i].Detail.Latitude), self.hotelList[i].Detail.HotelName));
            }
          })
        },
        formatCategory(cc) {
          // 艺龙推荐星级，而非酒店挂牌星级。对应值含义为：0,1,2：客栈；3：舒适；4：高档；5：豪华；A：公寓
          switch (cc) {
            case 0:
            case 1:
            case 2:
              return '客栈型';
              break;
            case 3:
              return '舒适型'
              break;
            case 4:
              return '高档型'
              break;
            case 5:
              return '豪华型'
              break;
            case A:
              return '公寓型'
              break;
          }
        },
        getScore(details) {
          console.log()
          if (details.Good / details.Count) {
            console.log('details', details);
            return ((details.Good / details.Count) * 5).toFixed(1)
          } else {
            return 0
          }
        },
        searchhotel() {

          this.loadingflag = true;
          this.currentpage = 1;
          this.searchHotelAxios(1).then(function (res) {
            console.log('酒店搜索结果', res.data.Result);
            var hotelResult = res.data.Result;
            self.Count = hotelResult.Count;
            console.log('酒店总数', self.Count);
            self.hotelList = hotelResult.Hotels.filter(function (item) {
              return item.LowRate;
            });
            self.loadingflag = false;
            console.log(self.hotelList[0]);
            var pp = new BMap.Point(self.hotelList[0].Detail.Longitude, self.hotelList[0].Detail.Latitude);

            self.mp.centerAndZoom(pp, 15);
            for (var i = 0; i < self.hotelList.length; i++) {
              self.mp.addOverlay(new self.ComplexCustomOverlay(new BMap.Point(self.hotelList[i].Detail.Longitude, self.hotelList[i].Detail.Latitude), self.hotelList[i].Detail.HotelName));
            }
          })
        },
        beselect(v) {
          console.log('不能搜索', v)
          // this.cansearch=false;
          var i_f = this.keywordList.filter(function (item) {
            return item.name == v;
          });
          console.log('i_f.length', i_f);
          if (i_f.length == 1) {
            self.Position.Longitude = i_f[0].lng;
            self.Position.Latitude = i_f[0].lat;
          }
        },
        chooseCityinfo(item) {
          this.Cityinfo = item;
          this.CityId = item['@CityCode'];
          this.destination = item['@CityName'];
          console.log('CityId', this.CityId);
        },
        handleSearchkeyword: lodash.debounce(function () {
          self.keywordList = [''];
          if (this.keyword != '') {
            axios.get("http://m.czgdly.com/transportation/hotel/gethotelsugkeywords.asp", {
              params: {
                word: self.keyword,
                CityId: self.Cityinfo['@CityCode'],
              }
            })
              .then(res => {
                if (this.keyword != '') {
                  self.keywordList = res.data;
                  console.log("输出的地名", res.data);
                } else {
                  self.keywordList = [];
                }
                // self.keywordList = res.data;
                // console.log("输出的地名", res.data);
              })
              .catch(error => {
                console.log(error);
              });
          }
        }, 500),
        handleSearch: lodash.debounce(function () {
          if (this.destination != '') {
            this.citylist = [''];
            axios
              .get(
                "/api/eLongHotels/GeoXmlHandle/GetCitysInfos", {
                  params: {
                    mainWord: this.destination,
                    provinceId: "",
                    secWord: ""
                  }
                }
              )
              .then(function (res) {
                console.log("输出的城市", res);
                self.citylist = [''];
                if (res.data.length == 1) {
                  self.Cityinfo = res.data[0].HotelGeo;
                  self.CityId = res.data[0].HotelGeo['@CityCode'];
                }
                for (var i = 0; i < res.data.length; i++) {
                  self.citylist.push(res.data[i].HotelGeo);
                }
                console.log(self.citylist);
                return;
              });

          } else {
            this.citylist = [''];
          }
        }, 500),
        dealCheckout() {
          console.log('????')
        },
        onDrawDate(e) { //过去不能选择
          let date = e.date
          let tt = new Date()
          tt.setDate(new Date().getDate() - 1);
          if (tt.getTime() > date.getTime()) {
            e.allowSelect = false
          }
        },
        onDrawDate2(e) { //必须选择大于已经选择的日期
          if (moment(e.date).isBefore(moment(this.checkinday))) {
            e.allowSelect = false
          }
        },
        getBus() {
          console.log('bug', this.bus);
          return this.bus;
        }
      }
    })
  </script>
</body>


</html>